<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
<style>
    #app {
        width: 600px;
        margin: 10px auto;
    }

    .tb {
        border-collapse: collapse;
        width: 100%;
    }

    .tb th {
        background-color: #ee8c0b;
        color: white;
    }

    .tb td,
    .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
    }

    .add {
        width: 588px;
        padding: 5px;
        border: 1px solid black;
        margin-bottom: 10px;
    }
</style>

<body>
    <div id="app">
        <div class="add">
            编号:<input type="text" v-model="code">
            品牌名称:<input type="text" v-model="goodsName">
            <br>
            产品图片地址:<input type="text" v-model="imgSrc">

            价格:<input type="text" v-model="price">
            <input type="button" value="添加" @click="add">
        </div>

        <!-- <div class="add">
            品牌名称:<input type="text" placeholder="请输入搜索条件">
        </div> -->

        <div>
            <table class="tb">
                <tr>
                    <th>全选
                        <input type="checkbox" @change="allCheckChange" :checked="allCheck">
                    </th>
                    <th>产品图片</th>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) of goods" :key="item.id">
                    <td>
                        <input type="checkbox" v-model="checks" :value="item">
                    </td>
                    <td>
                        <img :src="item.imgSrc" alt="" width="50" height="50">
                    </td>
                    <td>
                        {{item.code}}
                    </td>
                    <td>
                        {{item.goodsName}}
                    </td>
                    <td>
                        {{item.price}}
                    </td>
                    <td>
                        <button @click="jian(item)" :disabled="item.count<=1">-</button>
                        <b> {{item.count}}</b>
                        <button @click="zeng(item)">+</button>
                    </td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
                <!-- 动态生成内容tr -->

            </table>
            <div class="add" style="text-align: center;" v-show="!goods.length">没有更多数据了</div>
            <div class="add" style="width:588px;text-align:right">
                <h1>总价:{{total}}</h1>
            </div>
        </div>
    </div>
</body>
<script>
    //需求
    //1.根据数据,将表格动态创建出来

    //2.实现添加功能

    //3.实现删除功能
    //增加
    //1.给输入框使用v-model绑定数据

    //2.往goods数组中,多增加一个对象,视图就会多增加一个,使用数组的push

    //删除

    //1.点击按钮,获取当前这条数据的索引

    //2.使用数组的方法splice(索引,1) 就能删除

    //全选和反选功能

    //1.点击全选按钮,所有的选择框都要被选择

    //2.再次点击全选,所有的选择框取消选择

    //3.勾选列表中的选择框,全部被勾选的时候,全选按钮也需要被选择

    let vm = new Vue({
        el: "#app",
        data: {
            code: "",
            goodsName: "",
            imgSrc: "",
            price: "",
            allCheck: false,
            checks: [],
            goods: [
                {
                    id: 1,
                    code: 1,
                    imgSrc: "https://tse1-mm.cn.bing.net/th/id/R-C.fc48d5b3c65b7b79980ab09dfc2890d8?rik=jy07dRFBQAwjzw&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20190322%2fe2edee9d2ee847f0b564fcbadf356a46.jpeg&ehk=cKT9XpGfozyLcO5sia93t8gLeJurN9RM%2boqkkCk6a7Q%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1",
                    goodsName: "坤坤的背带裤",
                    price: 500,
                    count: 1
                },
                {
                    id: 2,
                    code: 2,
                    imgSrc: "https://tse3-mm.cn.bing.net/th/id/OIP-C.U2zPWJK7Gus24zXyQWwi0AHaEG?pid=ImgDet&rs=1",
                    goodsName: "品如的衣服",
                    price: 30,
                    count: 3
                },
                {
                    id: 3,
                    code: 3,
                    imgSrc: "https://static1.paizi.com/uploadfile/2018/0710/20180710095354871.jpg",
                    goodsName: "秀儿的秋裤",
                    price: 9.9,
                    count: 8
                },
            ]
        },
        watch: {
            //数组不需要使用深度侦听
            checks(newVal) {
                if (newVal.length === this.goods.length) {
                    //列表中的内容全部被勾选了,那么全选checkbox也要被勾选
                    this.allCheck = true;
                } else {
                    this.allCheck = false
                }
            }
        },
        computed: {
            total() {
                return (this.checks.reduce(function (total, item) {
                    return total += item.price * item.count
                }, 0)).toFixed(2)
            }
        },
        methods: {
            //点击全选checkbox的时候
            allCheckChange(e) {
                console.log(e.target.checked)
                let checked = e.target.checked;
                if (checked) {
                    //全选按钮被勾选了
                    this.checks = this.goods;
                } else {
                    this.checks = []
                }
            },
            //增加
            add() {
                if (!this.code || !this.goodsName || !this.price) {
                    alert('产品编号，名称，价格， 图片路劲必填')
                    return;
                }

                let obj = {
                    code: this.code,
                    imgSrc: this.imgSrc ? this.imgSrc : "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fstatic.tongliaowang.com%2Ffiles%2Ftlfiles%2Fimages%2F1707%2F12%2F20170712104436322556.jpg&refer=http%3A%2F%2Fstatic.tongliaowang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674817850&t=0b97db985db2ed6f2f8043059a714563",
                    goodsName: this.goodsName,
                    price: this.price,
                    count: 1

                }
                this.goods.push(obj)

            },
            //删除
            del(index) {

                this.goods.splice(index, 1)
            },
            // 减少数量
            jian(item) {
                item.count--
            },
            // 增加数量
            zeng(item) {
                item.count++

            },
        }

    })
</script>

</html>